import React, { useState, useEffect, useCallback } from 'react';
import { getSysDepartmentFindList, getSofContractSelected } from '../../../../../../Api/listUrl';
import {getSysMarkFindMark} from '../../../../../../Api/communalUrl';
import { putAccAmoebaOutboundInsertAmoebaOutbound, postAccAmoebaOutboundUpdateAmoebaOutboundDTO, getAccAmoebaOutboundUpdateShow } from '../../../../financialApi';
import { Modal, Form, Select, Row, Col, message, Button, DatePicker, Input } from 'antd';
import moment from 'moment';
const { Option } = Select;

/**
 * @description: 内部交易 -- 材料交易单 -- 添加出库弹窗
 * @author: xiaoxujs    
 * @updata: xiaoxujs（2021-11-20） 修改排列 和使用性质
 */

const AddLeaveWarehouseModule = ({ clickId, setAddLeaveWarehouseModuleShow, addLeaveWarehouseModuleShow, setClickId, listFun }) => {
    const [form] = Form.useForm();
    const { validateFields, resetFields, setFieldsValue } = form;
    const [buttonLoading, setButtonLoading] = useState(false);
    const [departmentList, setDepartmentList] = useState([]); //领用部门
    const [contractList, setContractList] = useState([]); //合同列表
    const [natureOfUse, setNatureOfUse] = useState([]); // 使用性质
    const [hetong, setHetong] = useState(false);
    const departmentFun = useCallback(
        () => {
            ; (async () => {
                const { code, msg, data } = await getSysDepartmentFindList();
                if (code === '20000') {
                    setDepartmentList(data);
                } else {
                    message.error(msg);
                }
            })();
        },
        [],
    )
    const contractFun = useCallback(
        () => {
            ; (async () => {
                const { code, msg, data } = await getSofContractSelected();
                if (code === '20000') {
                    setContractList(data);
                } else {
                    message.error(msg);
                }
            })();
        },
        [],
    )
    const typeFun = useCallback(
        () => {
            /**
             * 使用性质: SYXZ 
             */
                //车辆类型
                ; (async () => {
                    const { code, msg, data } = await getSysMarkFindMark({ typeCode: 'SYXZ' })
                    if (code === '20000') {
                        setNatureOfUse(data)
                    } else {
                        message.error(msg)
                    }
                })()

        },
        [],
    )
    useEffect(() => {
        departmentFun();
        contractFun();
        typeFun();
        if (clickId) {
            ; (async () => {
                const { code, msg, data } = await getAccAmoebaOutboundUpdateShow({ id: clickId });
                if (code === '20000') {
                    data.outBoundTime = moment(data.outBoundTime);
                    setFieldsValue(data)
                } else {
                    message.error(msg);
                }
            })()
        }
    }, [departmentFun, contractFun, clickId, setFieldsValue, typeFun])
    const handleOk = () => {
        validateFields().then(values => {

            values.outBoundTime = moment(values.outBoundTime).format("YYYY-MM-DD HH:mm:ss");
            setButtonLoading(true);
            if (clickId) {
                values.id = clickId;
                ; (async () => {
                    const { code, msg } = await postAccAmoebaOutboundUpdateAmoebaOutboundDTO(values);
                    if (code === '20000') {
                        message.success('编辑成功！');
                        setClickId(undefined);
                        listFun();
                        resetFields();
                        setButtonLoading(false);
                        setAddLeaveWarehouseModuleShow(false);
                    } else {
                        message.error(msg);
                    }
                })();
            } else {
                ; (async () => {
                    const { code, msg } = await putAccAmoebaOutboundInsertAmoebaOutbound(values);
                    if (code === '20000') {
                        message.success('添加成功！');
                        listFun();
                        resetFields();
                        setButtonLoading(false);
                        setAddLeaveWarehouseModuleShow(false);
                    } else {
                        message.error(msg);
                    }
                })();
            }
        })

    };

    const handleCancel = () => {
        setClickId(undefined);
        resetFields();
        setButtonLoading(false);
        setAddLeaveWarehouseModuleShow(false);
    };
    // 判断选择的是否是使用性质
    const handleNatureOfUseChange = (value, option) => {
        if(option.children === '生产用料' || option.children === '售后用料') {
            setHetong(true);
        }else{
            setHetong(false)
        }
    }
    return <Modal
        width={800}
        title={clickId ? "修改出库" : "添加出库"}
        visible={addLeaveWarehouseModuleShow}
        onCancel={handleCancel}
        bodyStyle={{ padding: '25px 63px' }}
        footer={[
            <Button style={{
                width: '88px',
                height: '34px',
            }} key="back" onClick={handleCancel}>
                取消
            </Button>,
            <Button key="submit" style={{
                width: '88px',
                height: '34px',
            }} type="primary" loading={buttonLoading} onClick={handleOk}>
                确定
            </Button>
        ]}
    >
        <Form form={form}>
            <Row>
                <Col span={12}>
                    <Form.Item
                        label="使用性质"
                        name="nature"
                        wrapperCol={{ span: 15 }}
                        rules={[
                            {
                                required: true,
                                message: '请选择使用性质!',
                            },
                        ]}
                    >
                        <Select placeholder='请选择' onChange = {handleNatureOfUseChange}>
                            {/* 生产用料、维修用料、售后用料、辅助用料、公司用料、其它 */}
                            {
                                natureOfUse.map(item => <Option value={item.markValue} key={item.markValue}>{item.markName}</Option>)
                            }
                        </Select>
                    </Form.Item>
                </Col>
                <Col span={12}>
                    {
                        hetong ?  <Form.Item
                        label="关联合同"
                        name="conNo"
                        wrapperCol={{ span: 15 }}
                        rules={[
                            {
                                required: true,
                                message: '请选择关联合同!',
                            },
                        ]}
                    >
                        <Select placeholder='请选择'>
                            {
                                contractList.map(item => <Option value={item.name} key={item.id}>{item.name}</Option>)
                            }
                        </Select>
                    </Form.Item> :  <Form.Item
                        label="关联合同"
                        name="conNo"
                        wrapperCol={{ span: 15 }}
                    >
                        <Select placeholder='请选择'>
                            {
                                contractList.map(item => <Option value={item.name} key={item.id}>{item.name}</Option>)
                            }
                        </Select>
                    </Form.Item>
                    }
                  
                </Col>
                <Col span={12}>
                    <Form.Item
                        label="成本金额"
                        name="money"
                        wrapperCol={{ span: 15 }}
                        rules={[
                            {
                                required: true,
                                message: '请输入成本金额!',
                            },
                            {
                                required: true,
                                pattern: new RegExp(/^[1-9]\d*$/, "g"),
                                message: '请输入正确的成本金额'
                            },
                        ]}
                    >
                        <Input suffix="元" />
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item
                        label="领用部门"
                        name="assumeDep"
                        wrapperCol={{ span: 15 }}
                        rules={[
                            {
                                required: true,
                                message: '请选择领用部门!',
                            },
                        ]}
                    >
                        <Select style={{ width: '100%' }} placeholder='请选择'>
                            {
                                departmentList.map(item => <Option value={item.id} key={item.id}>{item.name}</Option>)
                            }
                        </Select>
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item
                        label="出库时间"
                        name="outBoundTime"
                        wrapperCol={{ span: 15 }}
                        rules={[
                            {
                                required: true,
                                message: '请选择时间!',
                            },
                        ]}
                    >
                        <DatePicker style={{ width: '100%' }} showTime />
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item
                        label="销售金额"
                        name="outBoundMoney"
                        wrapperCol={{ span: 15 }}
                        rules={[
                            {
                                required: true,
                                message: '请输入出库金额!',
                            },
                            {
                                required: true,
                                pattern: new RegExp(/^[1-9]\d*$/, "g"),
                                message: '请输入正确的成本金额'
                            },
                        ]}
                    >
                        <Input suffix="元" />
                    </Form.Item>
                </Col>

            </Row>
        </Form>
    </Modal>
}

export default AddLeaveWarehouseModule;